<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Globalize Hello World (plain javascript)</title>
</head>
<body>
    <h1>Globalize Hello World (plain javascript)</h1>

    <div id="requirements">
        <h2>Requirements</h2>
        <ul>
            <li>You need to download `cldrjs` and `globalize` dependencies yourself. Read README.md for instructions.
            </li>
        </ul>
    </div>

    <div id="demo" style="display: none">
        <h2>Demo output</h2>
        <p>Now: <span id="date"></span></p>
        <p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
        <p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
        <p>A number: <span id="number"></span></p>
        <p>A number (compact form): <span id="number-compact"></span></p>
        <p>A currency: <span id="currency"></span></p>
        <p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
        <p>Messages:</p>
        <ul>
            <li><span id="message-0"></span></li>
            <li><span id="message-1"></span></li>
            <li><span id="message-2"></span></li>
            <li><span id="message-3"></span></li>
        </ul>
        <p>Something happened: <span id="relative-time"></span></p>
        <p>Speed limit: <span id="unit"></span></p>
    </div>

    <!--
    First, we load Globalize's dependencies (`cldrjs` and its supplemental
    module).
    -->
    <script src="cldrjs/dist/cldr.js"></script>
    <script src="cldrjs/dist/cldr/event.js"></script>
    <script src="cldrjs/dist/cldr/supplemental.js"></script>

    <!--
    Next, we load Globalize and its modules. Note they are already available on
    this repository. If it's not, read Usage on Getting Started on the root's
    README.md.
    -->
    <script src="globalize/dist/globalize.js"></script>
    <script src="globalize/dist/globalize/message.js"></script>
    <script src="globalize/dist/globalize/number.js"></script>
    <script src="globalize/dist/globalize/plural.js"></script>

    <!-- Load after globalize/number.js -->
    <script src="globalize/dist/globalize/date.js"></script>
    <script src="globalize/dist/globalize/currency.js"></script>

    <!-- Load after globalize/number.js and globalize/plural.js-->
    <script src="globalize/dist/globalize/relative-time.js"></script>
    <script src="globalize/dist/globalize/unit.js"></script>

    <script>

    // At this point, we have Globalize loaded. But, before we can use it, we
    // need to feed it on the appropriate I18n content (Unicode CLDR). In order
    // to do so, we use `Globalize.load()` and pass the content. On this demo,
    // we made the things a little easier for you: we've embedded static JSON
    // into the demo. So, you don't need to actually fetch it elsewhere.
    Globalize.load({
      "main": {
        "en": {
          "identity": {
            "version": {
              "_cldrVersion": "25",
              "_number": "$Revision: 91 $"
            },
            "generation": {
              "_date": "$Date: 2014-03-13 22:27:12 -0500 (Thu, 13 Mar 2014) $"
            },
            "language": "en"
          },
          "dates": {
            "calendars": {
              "gregorian": {
                "days": {
                  "format": {
                    "wide": {
                      "sun": "Sunday",
                      "mon": "Monday",
                      "tue": "Tuesday",
                      "wed": "Wednesday",
                      "thu": "Thursday",
                      "fri": "Friday",
                      "sat": "Saturday"
                    }
                  }
                },
                "months": {
                  "format": {
                    "abbreviated": {
                      "1": "Jan",
                      "2": "Feb",
                      "3": "Mar",
                      "4": "Apr",
                      "5": "May",
                      "6": "Jun",
                      "7": "Jul",
                      "8": "Aug",
                      "9": "Sep",
                      "10": "Oct",
                      "11": "Nov",
                      "12": "Dec"
                    },
                    "wide": {
                      "1": "January",
                      "2": "February",
                      "3": "March",
                      "4": "April",
                      "5": "May",
                      "6": "June",
                      "7": "July",
                      "8": "August",
                      "9": "September",
                      "10": "October",
                      "11": "November",
                      "12": "December"
                    }
                  }
                },
                "dayPeriods": {
                  "format": {
                    "wide": {
                      "am": "AM",
                      "am-alt-variant": "am",
                      "noon": "noon",
                      "pm": "PM",
                      "pm-alt-variant": "pm"
                    }
                  }
                },
                "dateFormats": {
                  "full": "EEEE, MMMM d, y",
                  "medium": "MMM d, y"
                },
                "timeFormats": {
                  "full": "h:mm:ss a zzzz",
                  "medium": "h:mm:ss a",
                },
                "dateTimeFormats": {
                  "full": "{1} 'at' {0}",
                  "medium": "{1}, {0}"
                }
              }
            },
            "fields": {
              "second": {
                "displayName": "Second",
                "relative-type-0": "now",
                "relativeTime-type-future": {
                  "relativeTimePattern-count-one": "in {0} second",
                  "relativeTimePattern-count-other": "in {0} seconds"
                },
                "relativeTime-type-past": {
                  "relativeTimePattern-count-one": "{0} second ago",
                  "relativeTimePattern-count-other": "{0} seconds ago"
                }
              }
            },
            "timeZoneNames": {
              "metazone": {
                "Brasilia": {
                  "long": {
                    "generic": "Brasilia Time",
                    "standard": "Brasilia Standard Time",
                    "daylight": "Brasilia Summer Time"
                  }
                }
              }
            }
          },
          "numbers": {
            "currencies": {
              "USD": {
                "symbol": "$"
              }
            },
            "defaultNumberingSystem": "latn",
            "symbols-numberSystem-latn": {
              "decimal": ".",
              "exponential": "E",
              "group": ",",
              "infinity": "∞",
              "minusSign": "-",
              "nan": "NaN",
              "percentSign": "%",
              "perMille": "‰",
              "plusSign": "+",
              "timeSeparator": ":"
            },
            "decimalFormats-numberSystem-latn": {
              "standard": "#,##0.###",
              "short": {
                "decimalFormat": {
                  "1000-count-one": "0K",
                  "1000-count-other": "0K",
                  "10000-count-one": "00K",
                  "10000-count-other": "00K",
                  "100000-count-one": "000K",
                  "100000-count-other": "000K",
                  "1000000-count-one": "0M",
                  "1000000-count-other": "0M",
                  "10000000-count-one": "00M",
                  "10000000-count-other": "00M",
                  "100000000-count-one": "000M",
                  "100000000-count-other": "000M",
                  "1000000000-count-one": "0B",
                  "1000000000-count-other": "0B",
                  "10000000000-count-one": "00B",
                  "10000000000-count-other": "00B",
                  "100000000000-count-one": "000B",
                  "100000000000-count-other": "000B",
                  "1000000000000-count-one": "0T",
                  "1000000000000-count-other": "0T",
                  "10000000000000-count-one": "00T",
                  "10000000000000-count-other": "00T",
                  "100000000000000-count-one": "000T",
                  "100000000000000-count-other": "000T"
                }
              }
            },
            "currencyFormats-numberSystem-latn": {
              "currencySpacing": {
                "beforeCurrency": {
                  "currencyMatch": "[:^S:]",
                  "surroundingMatch": "[:digit:]",
                  "insertBetween": " "
                },
                "afterCurrency": {
                  "currencyMatch": "[:^S:]",
                  "surroundingMatch": "[:digit:]",
                  "insertBetween": " "
                }
              },
              "standard": "¤#,##0.00"
            }
          },
          "units": {
            "short": {
              "per": {
                "compoundUnitPattern": "{0}/{1}"
              },
              "speed-mile-per-hour": {
                "displayName": "miles/hour",
                "unitPattern-count-one": "{0} mph",
                "unitPattern-count-other": "{0} mph"
              }
            }
          }
        }
      },
      "supplemental": {
        "version": {
          "_cldrVersion": "25",
          "_number": "$Revision: 91 $"
        },
        "currencyData": {
          "fractions": {
            "DEFAULT": {
              "_rounding": "0",
              "_digits": "2"
            }
          }
        },
        "likelySubtags": {
          "en": "en-Latn-US",
        },
        "metaZones": {
          "metazoneInfo": {
            "timezone": {
              "America": {
                "Sao_Paulo": [
                  {
                    "usesMetazone": {
                      "_mzone": "Brasilia"
                    }
                  }
                ]
              }
            }
          }
        },
        "plurals-type-cardinal": {
          "en": {
            "pluralRule-count-one": "i = 1 and v = 0 @integer 1",
            "pluralRule-count-other": " @integer 0, 2~16, 100, 1000, 10000, 100000, 1000000, … @decimal 0.0~1.5, 10.0, 100.0, 1000.0, 10000.0, 100000.0, 1000000.0, …"
          }
        }
      }
    });
    Globalize.loadMessages({
      "en": {
        "like": [
          "{0, plural, offset:1",
          "     =0 {Be the first to like this}",
          "     =1 {You liked this}",
          "    one {You and someone else liked this}",
          "  other {You and # others liked this}",
          "}"
        ]
      }
    });
    Globalize.loadTimeZone({
      "zoneData": {
        "America": {
          "Sao_Paulo": {
            "abbrs": [
              "LMT", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03",
              "-02", "-03", "-02", "-03", "-02", "-03", "-02", "-03", "-02"
            ],
            "untils": [
              -1767214412000, -1206957600000, -1191362400000, -1175374800000, -1159826400000,
              -633819600000, -622069200000, -602283600000, -591832800000, -570747600000,
              -560210400000, -539125200000, -531352800000, -195426000000, -184197600000,
              -155163600000, -150069600000, -128898000000, -121125600000, -99954000000, -89589600000,
              -68418000000, -57967200000, 499748400000, 511236000000, 530593200000, 540266400000,
              562129200000, 571197600000, 592974000000, 602042400000, 624423600000, 634701600000,
              656478000000, 666756000000, 687927600000, 697600800000, 719982000000, 728445600000,
              750826800000, 761709600000, 782276400000, 793159200000, 813726000000, 824004000000,
              844570800000, 856058400000, 876106800000, 888717600000, 908074800000, 919562400000,
              938919600000, 951616800000, 970974000000, 982461600000, 1003028400000, 1013911200000,
              1036292400000, 1045360800000, 1066532400000, 1076810400000, 1099364400000,
              1108864800000, 1129431600000, 1140314400000, 1162695600000, 1172368800000,
              1192330800000, 1203213600000, 1224385200000, 1234663200000, 1255834800000,
              1266717600000, 1287284400000, 1298167200000, 1318734000000, 1330221600000,
              1350788400000, 1361066400000, 1382238000000, 1392516000000, 1413687600000,
              1424570400000, 1445137200000, 1456020000000, 1476586800000, 1487469600000,
              1508036400000, 1518919200000, 1540090800000, 1550368800000, 1571540400000,
              1581818400000, 1602990000000, 1613872800000, 1634439600000, 1645322400000,
              1665889200000, 1677376800000, 1697338800000, 1708221600000, 1729393200000,
              1739671200000, 1760842800000, 1771725600000, 1792292400000, 1803175200000,
              1823742000000, 1834624800000, 1855191600000, 1866074400000, 1887246000000,
              1897524000000, 1918695600000, 1928973600000, 1950145200000, 1960423200000,
              1981594800000, 1992477600000, 2013044400000, 2024532000000, 2044494000000,
              2055376800000, 2076548400000, 2086826400000, 2107998000000, 2118880800000,
              2139447600000, null
            ],
            "offsets": [
              186.4667, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180,
              120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120,
              180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180,
              120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120,
              180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180,
              120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120,
              180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120, 180,
              120, 180, 120, 180, 120, 180, 120, 180, 120, 180, 120
            ],
            "isdsts": [
              0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
              0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
              1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1,
              0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0,
              1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1
            ]
          }
        }
      }
    });

    var en, like, number;

    // Instantiate "en".
    en = Globalize( "en" );

    // Use Globalize to format dates.
    document.getElementById( "date" ).textContent = en.formatDate( new Date(), {
      datetime: "medium"
    });

    // Use Globalize to format dates on specific time zone.
    document.getElementById( "zonedDate" ).textContent = en.formatDate( new Date(), {
      datetime: "full",
      timeZone: "America/Sao_Paulo"
    });

    // Use Globalize to format dates to parts.
    document.getElementById( "dateToParts" ).innerHTML = en.formatDateToParts( new Date(), {
      datetime: "medium"
    }).map(function( part ) {
      switch(part.type) {
        case "month": return "<strong>" + part.value + "<\/strong>";
        default: return part.value;
      }
    }).reduce(function( memo, value ) {
      return memo + value;
    });

    // Use Globalize to format numbers.
    number = en.numberFormatter();
    document.getElementById( "number" ).textContent = number( 12345.6789 );
    document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
      compact: "short",
      minimumSignificantDigits: 1,
      maximumSignificantDigits: 3
    });

    // Use Globalize to format currencies.
    document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );

    // Use Globalize to get the plural form of a numeric value.
    document.getElementById( "plural-number" ).textContent = number( 12345.6789 );
    document.getElementById( "plural-form" ).textContent = en.plural( 12345.6789 );

    // Use Globalize to format a message with plural inflection.
    like = en.messageFormatter( "like" );
    document.getElementById( "message-0" ).textContent = like( 0 );
    document.getElementById( "message-1" ).textContent = like( 1 );
    document.getElementById( "message-2" ).textContent = like( 2 );
    document.getElementById( "message-3" ).textContent = like( 3 );

    // Use Globalize to format a relative time.
    document.getElementById( "relative-time" ).textContent = en.formatRelativeTime( -35, "second" );

    // Use Globalize to format a unit.
    document.getElementById( "unit" ).textContent = en.formatUnit( 60, "mile/hour", {
      form: "short"
    });

    document.getElementById( "requirements" ).style.display = "none";
    document.getElementById( "demo" ).style.display = "block";

    </script>

</body>
</html>
